import styles from "@styles/article.module.less";
import { FillinOutline } from "antd-mobile-icons";
import Slide, { SlideRef } from "@shared/slide";
import { useRef, useState } from "react";
import Header from "@shared/header";
import GeekIcon from "@shared/geekIcon";
import Textarea from "react-textarea-autosize";
import { usePublishCommentMutation } from "@service/comments";
import { useParams } from "react-router-dom";

interface Props {
  // 评论 id
  id: string;
  // 评论作者昵称
  name: string;
  // 重置评论回复列表
  resetReplyComment: () => void;
}

export default function ReplyComment({ id, name, resetReplyComment }: Props) {
  const slideRef = useRef<SlideRef | null>(null);
  const [content, setContent] = useState("");
  const [publishComment] = usePublishCommentMutation();
  const cid = useParams().id!;
  return (
    <>
      <div
        className={styles.sofa}
        style={{ width: "71vw" }}
        onClick={() => slideRef.current?.open()}
      >
        <FillinOutline className={styles.icon} />
        <span>写回复</span>
      </div>
      <Slide ref={slideRef} direction={"toTop"}>
        <div className={styles.publish}>
          <Header
            title="回复评论"
            left={
              <GeekIcon
                type="iconfanhui"
                style={{ width: "4.5333vw", height: "4.5333vw" }}
                onClick={() => slideRef.current?.close()}
              />
            }
            right={
              <button
                onClick={() => {
                  publishComment({ target: id, content, art_id: cid })
                    .unwrap()
                    .then(() => {
                      slideRef.current?.close();
                      setContent("");
                      // 重新获取评论回复列表
                      resetReplyComment();
                    });
                }}
                className={styles.pubBtn}
              >
                发表
              </button>
            }
          />
          <Textarea
            minRows={4}
            autoFocus
            placeholder={`@${name}`}
            className={styles.textarea}
            value={content}
            onChange={(event) => setContent(event.target.value)}
          />
        </div>
      </Slide>
    </>
  );
}
